<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div class="hidden-toggles">
            <input
                name="coloration-level"
                type="radio"
                id="coloration-low"
                class="hidden-toggles__input"
            />
            <label for="coloration-low" class="hidden-toggles__label">Low</label>

            <input
                name="coloration-level"
                type="radio"
                id="coloration-medium"
                class="hidden-toggles__input"
                checked
            />
            <label for="coloration-medium" class="hidden-toggles__label">Medium</label>

            <input
                name="coloration-level"
                type="radio"
                id="coloration-high"
                class="hidden-toggles__input"
            />
            <label for="coloration-high" class="hidden-toggles__label">High</label>

            <input
                name="coloration-level"
                type="radio"
                id="coloration-striking"
                class="hidden-toggles__input"
            />
            <label for="coloration-striking" class="hidden-toggles__label">Striking</label>
        </div>
    </body>
    <style>
        :root {
            --accent: #007ecc;
            --accent-2: #ec2f4b;
            --text: #003f66;
            --text-hover: var(--accent);
            --text-active: #ffffff;
            --border-width: 0.125em;
        }

        html,
        body {
            height: 100%;
        }

        * {
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
                sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
            font-weight: 500;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .hidden-toggles {
            position: relative;
            border-radius: 999em;
            overflow: hidden;
            height: 2.75em;
            width: 20em;
            display: flex;
            flex-direction: row-reverse;
        }
        .hidden-toggles > * {
            flex: 0 0 33.33%;
        }
        .hidden-toggles:after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            border: var(--border-width) solid var(--accent);
            border-radius: 999em;
            pointer-events: none;
        }

        .hidden-toggles__input {
            display: none;
        }
        .hidden-toggles__input:checked + .hidden-toggles__label {
            background-color: var(--accent);
            color: var(--text-active);
        }
        .hidden-toggles__input:checked + .hidden-toggles__label:before {
            opacity: 1;
        }
        .hidden-toggles__input:checked + .hidden-toggles__label:last-of-type {
            background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
        }
        .hidden-toggles__input:nth-of-type(1) + label {
            order: 4;
        }
        .hidden-toggles__input:nth-of-type(2) + label {
            order: 3;
        }
        .hidden-toggles__input:nth-of-type(3) + label {
            order: 2;
        }
        .hidden-toggles__input:nth-of-type(4) + label {
            order: 1;
        }
        .hidden-toggles__input:nth-of-type(1):checked ~ label:last-of-type,
        .hidden-toggles__input:nth-of-type(2):checked ~ label:last-of-type {
            margin-right: -33.33%;
        }

        .hidden-toggles__label {
            display: flex;
            align-items: center;
            justify-content: space-around;
            position: relative;
            cursor: pointer;
            transition: all 0.2s ease-out;
            color: var(--text);
        }
        .hidden-toggles__label:hover {
            color: var(--text-hover);
        }
        .hidden-toggles__label:nth-of-type(2) {
            border-left: var(--border-width) solid var(--accent);
            border-right: var(--border-width) solid var(--accent);
        }
        .hidden-toggles__label:last-of-type {
            border-left: var(--border-width) solid var(--accent);
        }
    </style>
</html>
